<template>
  <div>
    <role-list ref="roleListRef" :disabled="!can('READ')" v-model:tableLoading="tableLoading">
      <template #toolbar-left>
        <el-button @click="openCreate" type="primary" :disabled="!can('EDIT')">创建角色</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="openEditById(row.id)"
              :disabled="row.id < 0 || !can('EDIT')" />
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteById(row.id)"
              :disabled="row.id < 0 || !can('EDIT')" />
          </template>
        </el-table-column>
      </template>
    </role-list>
    <role-edit-dialog ref="roleEditDialogRef" @close-saved="getData" />
  </div>
</template>
<script setup>
import roleList from "@/components/sys/role/list.vue";
import roleEditDialog from "@/components/sys/role/editDialog.vue";
import { can } from "@/utils/permission";
import { onMounted, ref, useTemplateRef } from "vue";
import { ElMessageBox } from "element-plus";
import roleApi from "@/api/sys/role"

onMounted(async () => {
  await getData()
})
const roleListRef = useTemplateRef("roleListRef")
const roleEditDialogRef = useTemplateRef("roleEditDialogRef")
const tableLoading = ref(false)
const getData = async () => {
  await roleListRef.value.getData()
}
const openCreate = () => {
  roleEditDialogRef.value.openCreate();
}
const openEditById = (id) => {
  roleEditDialogRef.value.openEditById(id);
}
const deleteById = async (id) => {
  await ElMessageBox.confirm("您确定要删除此角色吗？", "删除确认", {
    type: "warning",
  });
  tableLoading.value = true;
  let res = await roleApi.deleteById(id);
  if (res.code != 0) {
    tableLoading.value = false;
    return;
  }
  await getData();
}

</script>